
<template>
  <div style="background-color: rgb(239, 239, 244);">
    <div style="
        background-color: rgb(249, 249, 249);
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      ">
      <div style="width: 70%; display: flex">
        <div class="el-icon-shopping-cart-2" style="font-size: 36px; margin-left: 20px; color: rgb(150, 53, 138)"></div>
        <div style="font-size: 20px; margin-top: 5px; margin-left: 20px">
          发票管理
        </div>
      </div>
      <div style="width: 30%">

        <div>
          <span style="margin-left: 40%;">
            <!-- <el-button type="primary">采购合同申请</el-button> -->
          </span>
          <img src="../../assets/img/sq.png" alt="" style="background-color: rgb(200, 200, 200); float: right" />
        </div>
      </div>
    </div>
    <!-- 弹性布局，垂直居中，设置高度 -->
    <div style="display: flex; align-items: center; height: 60px;">
      <div style="margin-left: 30px;">相关项目:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input1"> </el-input>
      </div>
      <!-- <div style="margin-left: 10px">相关合同:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input2"> </el-input>
      </div>
      <div style="margin-left: 10px">相关客户:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input1"> </el-input>
      </div> -->
      <div style="margin-left: 30px">供应商:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input2"> </el-input>
      </div>
      <div style="margin-left: 50px">
        <el-button type="primary" @click="queryData">查&nbsp&nbsp&nbsp&nbsp询</el-button>
      </div>
      <div style="margin-left: 50px">
        <el-button type="primary" @click="resetData">重&nbsp&nbsp&nbsp&nbsp置</el-button>
      </div>
      <div style="margin-left: 50px">
        <el-button type="primary" @click="add()">发票录入</el-button>
      </div>
    </div>
    <div style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        // 自动递增列
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="invoiceNumber" label="发票编号"></el-table-column>
        <el-table-column prop="purchaseId" label="采购编号"></el-table-column>
        <el-table-column prop="invoiceCode" label="发票代码"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="afterTaxAmount" label="税后金额"></el-table-column>
        <el-table-column prop="issuingUnit" label="开票单位"></el-table-column>
        <el-table-column prop="invoicingDate" label="开票日期"></el-table-column>
        <el-table-column prop="checkCode" label="校验码"></el-table-column>
        <el-table-column prop="inputPerson" label="录入人"></el-table-column>
        <el-table-column prop="inputDate" label="录入日期"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>

        <!-- 旧的
        <el-table-column prop="relevantProject" label="相关项目"></el-table-column>
        <el-table-column prop="principal" label="项目经理"></el-table-column>
        <el-table-column prop="invoiceDate" label="开票日期"></el-table-column>
        <el-table-column prop="invoiceNumber" label="发票号码"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="totalPrice" label="总价"></el-table-column> -->

      </el-table>

      <el-dialog :title="titles" :visible.sync="dialogFormVisible" width="500px" hight="600px">
        <el-form :label-width="formLabelWidth">
          <el-form-item label="发票编号:" :label-width="formLabelWidth" >
            <el-input v-model="form.invoiceNumber" autocomplete="off" placeholder="请输入发票编号" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="采购编号:" :label-width="formLabelWidth">
            <el-input v-model="form.purchaseId" autocomplete="off" placeholder="请输入采购编号" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="发票代码:" :label-width="formLabelWidth">
            <el-input v-model="form.invoiceCode" autocomplete="off" placeholder="请输入发票代码" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="商品名称:" :label-width="formLabelWidth">
            <el-input v-model="form.productName" autocomplete="off" placeholder="请输入商品名称" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="税后金额:" :label-width="formLabelWidth">
            <el-input v-model="form.afterTaxAmount" autocomplete="off" placeholder="请输入税后金额" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="开票单位:" :label-width="formLabelWidth">
            <el-input v-model="form.issuingUnit" autocomplete="off" placeholder="请输入开票单位" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="开票日期:" :label-width="formLabelWidth">
            <el-input v-model="form.invoicingDate" autocomplete="off" placeholder="请输入开票日期" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="校验码:" :label-width="formLabelWidth">
            <el-input v-model="form.checkCode" autocomplete="off" placeholder="请输入校验码" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="录入人:" :label-width="formLabelWidth">
            <el-input v-model="form.inputPerson" autocomplete="off" placeholder="请输入录入人" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="录入日期:" :label-width="formLabelWidth">
            <el-input v-model="form.inputDate" autocomplete="off" placeholder="请输入录入日期" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off" placeholder="请输入备注" style="width: 350px; height: 40px;"></el-input>
          </el-form-item>
          <div style="margin-left: 50px">
        <div>
          <el-upload
            class="upload-demo"
            :auto-upload="false"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed">
            <el-button size="big" type="primary">上传电子文件</el-button>
          </el-upload>
        </div>
      </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="suer">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {lookinvoice,upload,invoiceAdd} from '../../api/login';
import {getFile} from '../../api/contract';
// import { download,upload } from "../../utils/upload";

export default {
  mounted() {
    this.queryData();
  },
  data() {
    return {
      // 统一发票录入标签的宽度
      formLabelWidth: '90px',
      // 弹出新增或者修改的对话框
      dialogFormVisible: false,
      // 新增或者修改采购单的标题
      titles: "",
      // 新增的表单
      form: {
        invoiceNumber: "请发票编号",
        purchaseId: "",
        invoiceCode: "",
        productName: "",
        afterTaxAmount: "",
        issuingUnit: "",
        invoicingDate: "",
        checkCode: "",
        inputPerson: "",
        inputDate: "",
        remarks: ""
      },
      // 筛选的三个输入框
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      tableData: [],
      result: '',
      message: ''
    };
  },
  methods: {
    //点击确认时调用的方法
    suer() {
      let data = {
        invoiceNumber: this.form.invoiceNumber,
        purchaseId: this.form.purchaseId,
        invoiceCode: this.form.invoiceCode,
        productName: this.form.productName,
        applyTime: this.form.afterTaxAmount,
        supplier: this.form.issuingUnit,
        purchaseCost: this.form.invoicingDate,
        checkCode: this.form.checkCode,
        inputPerson: this.form.inputPerson,
        inputDate: this.form.inputDate,
        remarks: this.form.remarks,
      }
      console.log(data);
      if (this.titles === "发票录入"){

        invoiceAdd(data).then(res => {
          this.dialogFormVisible = false;
          console.log(res);
          this.queryData();
        })
      }
    },
    
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryData()
    },
    queryData() {
      let data = {
        // pageNum: this.pageNum,
        // pageSize: this.pageSize,
        // purchaseId: this.input1,
        // relevantData: this.input2,
        // supplier: this.input3
      }
      lookinvoice().then(res => {
        console.log(res);
        this.tableData = res.result
      })
    },
    resetData() {
        this.pageNum = 1,
        this.pageSize = 10,
        this.input1 = null,
        this.input2 = null,
        this.input3 = null,
        this.queryData();
    },
    handleChange(event){
      upload(event.raw).then(res => {
        this.getFileName()
        console.log(res)
      })
    },
    add(){
      this.titles = '发票录入';
      this.form = {
        invoiceNumber: "",
        purchaseId: "",
        invoiceCode: "",
        productName: "",
        afterTaxAmount: "",
        issuingUnit: "",
        invoicingDate: "",
        checkCode: "",
        inputPerson: "",
        inputDate: "",
        remarks: ""
      };
      console.log(this.form);
      this.dialogFormVisible = true;
    },
    cancel() {
      this.dialogFormVisible = false
    },
  }
};
</script>

<style>
</style>
